<template>
  <q-layout
      v-if="backgroundStyle"
      view="lHr LpR fFf"
      class="workspace-layout"
  >
    <template v-if="background">
      <div id="workspace-background" :style="backgroundStyle"></div>
    </template>

    <slot name="header"></slot>
    <q-header v-if="header && !this.$scopedSlots.header"
              elevated class="bg-primary bg-transparent text-white" height-hint="98">
      <q-toolbar>
        <q-btn v-if="leftDrawer" dense flat round icon="menu" @click="left = !left"/>
        <q-toolbar-title>
          <slot name="header-title"></slot>
        </q-toolbar-title>
        <q-btn v-if="rightDrawer" dense flat round icon="menu" @click="right = !right"/>
      </q-toolbar>
    </q-header>

    <q-page-container>
      <q-page>
        <slot name="page"></slot>
      </q-page>
    </q-page-container>

    <q-drawer v-if="leftDrawer" show-if-above v-model="left"
              :width="210" side="left" bordered persistent>
      <slot name="left-drawer"></slot>
    </q-drawer>

    <q-drawer v-if="rightDrawer" show-if-above v-model="right" :width="210" side="right" bordered>
      <slot name="right-drawer"></slot>
    </q-drawer>

    <q-page-scroller position="bottom-right" :scroll-offset="1" :offset="[18, 18]">
      <q-btn round color="primary" icon="keyboard_arrow_up"/>
    </q-page-scroller>

    <slot name="append"></slot>

  </q-layout>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'WorkspaceLayout',
  components: {},
  props: {
    header: Boolean,
    leftDrawer: {
      type: Boolean,
      default: true
    },
    rightDrawer: Boolean,
    title: {
      type: String,
      default: ''
    },
    background: Boolean
  },
  data () {
    return {
      left: true,
      right: true
    }
  },
  computed: {
    backgroundStyle () {
      const options = this.$store.state.workbench.options
      const currentBackground = options.backgrounds
          .find((e) => e.id === options.backgroundId)
      if (!currentBackground) return null
      return currentBackground.url
          ? { backgroundImage: `url(${currentBackground.url})` }
          : { backgroundColor: currentBackground.color || 'white' }
    }
  }
})
</script>

<style lang="scss">

$backgroundImageUrl: "";

#workspace-background {
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat no-repeat;
  background-size: cover;
}

.workspace-layout {
  animation: fadeIn 280ms ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

</style>
